<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07_表单</title>
</head>
<body>
<!--    form表示整个表单 action属性用于提交表单收集的数据 #占位符，暂时提交单本页-->
<!-- input是表单的输入控件
     name：控制空间的名字，没有name的空间无法提交值！
     value：默认存在，用来保存用户在空间中输入的值，也可以设置输入框的默认值与按钮上显示的文字
     readonly：单值属性，只读，用户无法修改，但是可以提交值
     disabled：单值属性，禁用，用户无法修改，也无法提交值
     placeholder：提示文本占位符 -->
    <form action="#">
        姓名1：<input type="text" name="uname1"><br>
        姓名2：<input type="text" name="uname2" placeholder="请输入您的姓名"><br>
        姓名3：<input type="text" name="uname3" value="rose"><br>
        姓名4：<input type="text" name="uname4" value="rose" readonly><br>
        姓名5：<input type="text" name="uname5" value="rose" disabled><br>
        密码：<input type="password" name="upwd" maxlength="6" placeholder="请输入您的密码"><br>
        性别：<input type="radio" name="sex" value="1"checked>男
             <input type="radio" name="sex" value="0">女<br>
        爱好：<input type="checkbox" name="like" value="1" checked>看电影
             <input type="checkbox" name="like" value="2">看小说
             <input type="checkbox" name="like" value="3" checked>打游戏
             <input type="checkbox" name="like" value="4">冲浪<br>

        <!--   h5新增了一些表单控件 -->
        幸运色：<input type="color" name="lc"><br>
        缩放：<input type="range" name="sf"><br>
        生日：<input type="date" name="birthday"><br>
        文件：<input type="file" name="file"><br><br>

        <!--  关联效果1：点击文字即可选中复选框  -->
        <input type="checkbox" id="ok">
        <label for="ok">我同意以上协议</label><br>

        <!--  关联效果2：点击文字即可让输入框获取输入焦点  -->
        <label for="nickname">昵称</label>
        <input type="text" id="nickname" placeholder="请输入昵称"><br>

        <input type="submit" value="点我提交">
        <input type="reset" value="点我重置">
        <input type="button" value="普通按钮">
        <button>普通按钮</button><br>
<!--        type属性控制空间的类型
        text普通文本输入框 passwprd密码框 radio单选框 checkbox多选框 file上传文件 date日期 color颜色 range范围
        submit提交按钮 reset重置按钮(恢复成所有控件的初始状态) button普通按钮-->

        喜欢的城市：
        <select name="city">
            <option value="bj">北京</option>
            <option value="sh" selected>上海</option>
            <option value="gz">广州</option>
            <option value="sz">深圳</option>
        </select>

        留言板：
        <textarea name="message" style="resize: none"></textarea>

    </form>
</body>
</html>